<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/layui/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$.ajax({
		type : "POST",
		data : {"aa":"aa"},
		url : "/estate/all",
		dataType : "json",
		success : function(data) {
			$.each(data, function(index,obj){
				$("#xiaoqu").prepend("<li><button onclick='childData(this)' value='"+obj.villageId+"'>"+obj.villageId+"," + obj.villageName + "</button><ul style='margin-left:20px;'></ul></li>");
			});
		}
	});
});
function childData(viewObj){
	var val = $(viewObj).attr("value");
	var ulObj = $(viewObj).next();
	if($(ulObj).find("ul").length > 0){
		$(ulObj).empty();
		return;
	}
	$.ajax({
		type : "POST",
		data : {"pid":val},
		url : "/estate/estate",
		dataType : "json",
		success : function(data) {
			$.each(data, function(index,obj){
				$(ulObj).prepend("<li><button onclick='childData(this)' value='"+obj.estateId+"'>"+obj.estateId+"," + obj.name + "," + obj.type + "</button><ul style='margin-left:20px;'></ul></li>");
			});
		}
	});
}
</script>
</head>
<body>
	<div>
		<ul id="xiaoqu" style='margin-left:20px;'></ul>
	</div>
</body>
</html>